<template>
	<view class="all">
		<view class="headers">
			<view style="height: var(--status-bar-height);">
				<!-- app状态栏高度占位 -->
			</view>
			<view class="title">
				商家端
			</view>
			<view class="btns">
				<view class="left">
					<view class="texts">
						<view class="goIn">
							今日收入
						</view>
						<view class="money">
							{{dataList.todayIncome}}
						</view>
					</view>
					<image style="height: 180rpx;width: 343rpx;" src="@/static/img/overview_function_income.png"
						mode=""></image>


				</view>
				<view class="right">
					<view class="texts">
						<view class="goIn">
							今日支出
						</view>
						<view class="money">
							{{dataList.todayPaid}}
						</view>
					</view>
					<view class="">

					</view>
					<image style="height: 180rpx;width: 343rpx;" src="@/static/img/overview_function_expenditure.png"
						mode=""></image>
				</view>
			</view>
		</view>

		<view class="dayDate">
			<view class="container">
				<view class="title_1">
					今日数据
				</view>
				<view class="line">
					<view class="item">
						<view class="">
							已预订
						</view>
						<view class="">
							{{beenBooked.reserved}}
						</view>
						<view class="">
							昨日 {{beenBooked.bookedYesterday}}
						</view>
					</view>
					<view class="item">
						<view class="">
							已入住
						</view>
						<view class="">
							{{haveChecked.reserved}}
						</view>
						<view class="">
							昨日 {{haveChecked.bookedYesterday}}
						</view>
					</view>
					<view class="item">
						<view class="">
							剩余房间
						</view>
						<view class="">
							{{spareRoom.reserved}}
						</view>
						<view class="">
							昨日 {{spareRoom.bookedYesterday}}
						</view>
					</view>
					<view class="item">
						<view class="">
							房间总数
						</view>
						<view class="">
							{{spareRoom.bookedYesterday}}
						</view>
						<view class="">
							昨日 19
						</view>
					</view>
				</view>
				<view class="line">
					<view class="item">
						<view class="">
							今日订单
						</view>
						<view class="">
							{{orderToday.reserved}}
						</view>
						<view class="">
							昨日 {{orderToday.bookedYesterday}}
						</view>
					</view>
					<view class="item">
						<view class="">
							成交顾客
						</view>
						<view class="">
							{{turnover.reserved}}
						</view>
						<view class="">
							昨日 {{turnover.reserved}}
						</view>
					</view>
					<view class="item">
						<view class="">
							续费顾客
						</view>
						<view class="">
							{{renewal.reserved}}
						</view>
						<view class="">
							昨日 {{renewal.reserved}}
						</view>
					</view>
					<view class="item">
						<view class="">
							浏览顾客
						</view>
						<view class="">
							{{pageView.page_view}}
						</view>
						<view class="">
							昨日 {{pageView.bookedYesterday}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="monDate">
			<view class="container">
				<view class="title_1">
					本月数据
				</view>
				<view class="line">
					<view class="item">
						<view class="">
							订单总数
						</view>
						<view class="blueFont">
							{{monthOrderNum.orderNum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(monthOrderNum.lastOrderNum)>=0?'#E82828':'#23BC2C'}">{{monthOrderNum.lastOrderNum}}%</text>
						</view>
					</view>
					<view class="item">
						<view class="">
							顾客总数
						</view>
						<view class="blueFont">
							{{peopleNum.orderNum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(peopleNum.lastOrderNum)>=0?'#E82828':'#23BC2C'}">{{peopleNum.lastOrderNum}}%</text>
						</view>
					</view>
					<view class="item">
						<view class="">
							总浏览量
						</view>
						<view class="blueFont">
							{{totalPageViews.incomeSum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(totalPageViews.lastIncomeSum)>=0?'#E82828':'#23BC2C'}">{{totalPageViews.lastIncomeSum}}%</text>
						</view>
					</view>
				</view>
				<view class="line">
					<view class="item">
						<view class="">
							总收入
						</view>
						<view class="blueFont">
							{{generalIncome.orderNum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(generalIncome.lastOrderNum)>=0?'#E82828':'#23BC2C'}">{{generalIncome.lastOrderNum}}%</text>
						</view>
					</view>
					<view class="item">
						<view class="">
							总支出
						</view>
						<view class="blueFont">
							{{expendCount.incomeSum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(expendCount.lastIncomeSum)>=0?'#E82828':'#23BC2C'}">{{expendCount.lastIncomeSum}}%</text>
						</view>
					</view>
					<view class="item">
						<view class="">
							总收益
						</view>
						<view class="blueFont">
							{{totalRevenue.incomeSum}}
						</view>
						<view class="">
							较上月 <text :style="{color:Number(totalRevenue.lastIncomeSum)>=0?'#E82828':'#23BC2C'}">{{totalRevenue.lastIncomeSum}}%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 1rpx;">
			
		</view>
	</view>

</template>

<script>
	import {overview} from '@/utils/api.js'
	export default {
		data() {
			return {
				dataList:{},
				beenBooked:{},
				expendCount:{},
				generalIncome:{},
				haveChecked:{},
				monthOrderNum:{},
				orderToday:{},
				pageView:{},
				peopleNum:{},
				renewal:{},
				spareRoom:{},
				totalPageViews:{},
				totalRevenue:{},
				turnover:{}
			}
		},
		onLoad(){
			try {
				const token = uni.getStorageSync('user');
				console.log(token, 'token');
				if (token) {
					console.log('88888');
					overview().then(res=>{
						console.log(77777,res);
						if(res.data.meta.status==200){
							this.dataList=res.data.data
							console.log(this.dataList,'this.dataList');
							this.beenBooked=res.data.data.beenBooked
							this.expendCount=res.data.data.expendCount
							this.generalIncome=res.data.data.generalIncome
							this.haveChecked=res.data.data.haveChecked
							this.monthOrderNum=res.data.data.monthOrderNum
							this.orderToday=res.data.data.orderToday
							this.pageView=res.data.data.pageView
							this.peopleNum=res.data.data.peopleNum
							this.renewal=res.data.data.renewal
							this.spareRoom=res.data.data.spareRoom
							this.totalPageViews=res.data.data.totalPageViews
							this.totalRevenue=res.data.data.totalRevenue
							this.turnover=res.data.data.turnover
						}
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.all {
		height: 100%;
		.headers {
			padding: 100rpx 24rpx 0 24rpx;
			height: 380rpx;
			// padding: 0 15px 0 15px;
			background-image: url('@/static/img/homepage_img_top_bg.png');
			background-size: 100%;
			background-repeat: no-repeat;

			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.btns {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.left {
					position: relative;
					height: 180rpx;

					.texts {
						padding: 0 20rpx;
						position: absolute;
						display: flex;
						flex-direction: column;
						line-height: 80rpx;
						z-index: 1;
					}
				}

				.right {
					height: 180rpx;
					position: relative;

					.texts {
						padding: 0 20rpx;
						position: absolute;
						display: flex;
						flex-direction: column;
						line-height: 80rpx;
						z-index: 1;
					}
				}

				.goIn {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.money {
					font-size: 48rpx;
					font-family: DINPro;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.dayDate {
			padding: 0 24rpx 0 24rpx;
			.container {
				background-color: #FFFFFF;
				border-radius: 16rpx;

				.title_1 {
					padding: 40rpx 10rpx;
					font-size: 40rpx;
					font-weight: 800;
					color: #242424;
					text-align: center;
				}

				.line {
					display: flex;

					.item {
						width: 25%;
						text-align: center;
						
						border: 1rpx solid #fbfbfb;
						border-top: none;
						padding: 25rpx;

					}

					.item :first-child {
						font-size: 28rpx;
						font-weight: bold;
						color: #484848;
					}

					.item :nth-child(2) {
						font-size: 48rpx;
						font-weight: 500;
						color: #5398F6;
					}

					.item :nth-child(3) {
						font-size: 24rpx;
						font-weight: 500;
						color: #868686;
					}
				}
			}
		}
		.monDate {
			margin: 20rpx 0;
			padding: 0 24rpx 0 24rpx;
			.container {
				background-color: #FFFFFF;
				border-radius: 16rpx;
		
				.title_1 {
					padding: 40rpx 10rpx;
					font-size: 40rpx;
					font-weight: 800;
					color: #242424;
					text-align: center;
				}
		
				.line {
					display: flex;
		
					.item {
						width: 30%;
						text-align: center;
						border: 1rpx solid #fbfbfb;
						border-top: none;
						padding: 25rpx;
						.blueFont{
							color: #5398F6;
						}
					}
					.item :first-child {
						font-size: 28rpx;
						font-weight: bold;
						// color: #484848;
					}
		
					.item :nth-child(2) {
						font-size: 48rpx;
						font-weight: 500;
						// color: #5398F6;
					}
		
					.item :last-child {
						font-size: 24rpx;
						font-weight: 500;
						// color: #868686;
					}
				}
			}
		}

	}
</style>